.charts-client {
    .charts-buttons {
        float: right;
        margin: 5px 0px;
        z-index: 1000;
        .ui-button-icon {
            display: block;
            margin-right: 5px;
            background: white;
            color: #666;
            border-color: white;
            .icon {
                font-size: 1.2em;
                line-height: 1.2em;
            }
            .fa-check-square {
                color: $state-success-text;
            }
        }
    }
    .charts-center {
        float: left;
        width: 70%;
        overflow: hidden;
        padding: 10px 5px 10px 10px;
        .charts-viewer {
            height: inherit;
            min-height: 50px;
            .info {
                position: absolute;
                margin: 40px 20px 50px 10px;
                width: 50%;
            }
            .text {
                position: relative;
                margin-left: 5px;
                top: -1px;
                font-size: 1em;
                display: inline;
            }
            .icon {
                font-size: 1.2em;
                display: inline-block;
            }
            .charts-viewer-container {
                float: left;
                display: block;
                height: 100%;
            }
            .charts-viewer-canvas {
                display: block;
                width: 100%;
                min-height: 100px;
                height: inherit;
            }
        }
    }
    .charts-right {
        float: left;
        width: 30%;
        height: 100vh;
        padding-bottom: 32px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        .ui-message {
            margin: 5px;
            width: auto;
        }
        .charts-editor {
            display: block;
            flex: 1;
            overflow: auto;
            padding: 5px 10px 10px 5px;
            .charts-description {
                margin-bottom: 20px;
                .charts-description-image-td {
                    vertical-align: top;
                }
                .charts-description-image {
                    width: 50px;
                    height: 43px;
                    margin-right: 10px;
                }
                .charts-description-title {
                    font-weight: bold;
                }
                .charts-description-text {
                    margin-top: 5px;
                    word-break: break-word;
                }
            }
            .tab-icon {
                margin-right: 0px;
                color: #666;
                font-size: 1.2em;
            }
            .portlet-content {
                padding: 0px;
            }
            .ui-table-section,
            .ui-portlet-panel .portlet-content {
                padding-left: 5px;
            }
        }
    }
}

.charts-client.charts-fullscreen {
    .charts-buttons {
        position: absolute;
        right: 0px;
    }
    .charts-center {
        width: 100%;
    }
    .charts-right {
        display: none;
    }
}
